define([
	'jquery',
	'underscore',
	'backbone',
	'text!tpl/MainView.html'], function($, _, Backbone, MainViewTemplate) {

	var MainView = Backbone.View.extend({

		el: '#view-content',

		header: '#view-header',

		template: _.template(MainViewTemplate),

		events: {
			'click #btn-parks-list-view': 'onClickBtnParksListView'
		},

		initialize: function() {
			this.render();
			this.initializeSwiper();
		},

		render: function() {
			$(this.header).empty();
			this.$el = $(this.el);
			this.$el.html(this.template);
		},

		onClickBtnParksListView: function(e) {
			e.preventDefault();
			App.navigate('nationalsParks');
		},

		initializeSwiper: function() {
			var slide = null,
				mainSliderContainer = this.$el.find('#main-slider-container'),
				mainBlocker = this.$el.find('#main-blocker');

			mainBlocker.height(window.innerHeight);
			mainSliderContainer.height(window.innerHeight);

			new Swiper('#main-slider-container', {
				speed: 300,
				autoPlay: 2500,
				resizeEvent: 'resize',
				loop: true,
				onSlideChangeEnd: function(swiper) {
					mainSliderContainer.find('.img').removeClass('animate2');
					slide = $(swiper.slides[swiper.realIndex]).find('.img');
					slide.addClass('animate2');
					console.log('1');
				},
				onSlideChangeEnd: function(swiper) {
					mainSliderContainer.find('.img').removeClass('animate2');
					slide = $(swiper.slides[swiper.realIndex]).find('.img');
					slide.addClass('animate2');
					console.log('2');
				}
			});
		}
	});

	return MainView;
});